<script setup lang="ts">
import { onMounted, reactive, ref, computed } from "vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { Message, PaginationProps } from "@arco-design/web-vue";
import type { newsCenterEditType } from "@/types/newsType";
import useModal from "@/hooks/useModal.ts";
import {
  newsCenterList,
  newsCenterDel,
  newsCenterTop,
} from "@/services/newsApi";
import EventCenterForm from "./eventCenterForm.vue";
const { ModalShow, ModalHide } = useModal();

const drawer = ref<{
  showDialog: () => {};
  hideDialog: () => {};
}>();
const visible = ref(false);

const data = ref<newsCenterEditType[]>([]);

const searchValue = reactive({
  title: "",
});
const search = () => {
  pagination.current = 1;
  queryData();
};
const reset = () => {
  searchValue.title = "";
  search();
};

const centerContent = ref<{
  show: () => void;
  edit: (data: newsCenterEditType) => void;
}>();

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  showTotal: true,
  pageSize: 10,
});

const formSearch = reactive({
  current: 1,
  size: 10,
  title: searchValue.title,
});

function queryData() {
  // data.value = [];
  newsCenterList({
    current: pagination.current,
    size: pagination.pageSize,
    data: {
      title: searchValue.title,
    },
  }).then((res) => {
    if (res.code === 200) {
      data.value = res.data.records;
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
    }
  });
}

// 添加
const handleAdd = () => {
  options.title = "添加赛事";
  centerContent.value?.show();
};

// 修改
const handleEdit = (row: newsCenterEditType) => {
  options.title = "编辑赛事";
  centerContent.value?.edit(row);
};

const info = reactive({
  title: "",
  content: "",
});

// 详情
const handleInfo = (row: newsCenterEditType) => {
  info.title = row.title;
  info.content = row.content;
  options.title = "查看赛事通知";
  visible.value = true;
  formModel.title = row.title;
  formModel.id = row.id;
  formModel.introduce = row.introduce;
  formModel.schedule = row.schedule;
  formModel.reward = row.reward;
  formModel.unitRequirement = row.unitRequirement;
  formModel.projectRequirement = row.projectRequirement;
  formModel.submitContent = row.submitContent;
  formModel.reviewRule = row.reviewRule;
};

// 置顶
const toTop = (row) => {
  ModalShow({
    content: "您确认要置顶这条信息吗？",
  }).then(() => {
    row.status = 1;
    newsCenterTop([row.id]).then((res) => {
      if (res.code === 200) {
        ModalHide();
        Message.success("置顶成功");
        queryData();
      } else {
        ModalHide();
      }
    });
  });
};
// 删除
const handleDelete = (row: newsCenterEditType) => {
  ModalShow({
    content: "您确认要删除这条赛事吗？",
  }).then(() => {
    newsCenterDel([row.id]).then((res) => {
      if (res.code === 200) {
        if (data.value.length === 1) {
          formSearch.current = formSearch.current - 1;
        }
        queryData();
        ModalHide();
        Message.success("删除成功");
      } else {
        ModalHide();
      }
    });
  });
};

const handlePageChange = (page: number) => {
  formSearch.current = page;
  queryData();
};

onMounted(() => {
  queryData();
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    slotName: "index",
  },
  {
    title: "赛事标题",
    dataIndex: "title",
    width: 180,
  },
  {
    title: "赛事介绍",
    dataIndex: "introduce",
    width: 180,
    slotName: "introduce",
  },
  {
    title: "赛程安排",
    dataIndex: "schedule",
    width: 180,
    slotName: "schedule",
  },
  {
    title: "是否置顶",
    dataIndex: "isTop",
    width: 180,
    slotName: "isTop",
  },
  {
    title: "操作",
    slotName: "operate",
    width: 160,
  },
];

const formModel = reactive<newsCenterEditType>({
  id: "",
  title: "",
  introduce: "",
  schedule: "",
  reward: "",
  unitRequirement: "",
  projectRequirement: "",
  submitContent: "",
  reviewRule: "",
});

const options = reactive({
  title: "",
});

const handleCancel = () => {
  drawer.value?.hideDialog();
};
const handleClose = () => {
  visible.value = false;
};

const stripHtml = (html: string) => {
  const doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
};
</script>

<template>
  <a-space
    class="container"
    direction="vertical"
  >
    <a-card>
      <a-form
        label-align="left"
        auto-label-width
      >
        <a-row class="grid-demo">
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-form-item
              field="title"
              label="赛事标题"
            >
              <a-input
                allow-clear
                v-model="searchValue.title"
                placeholder="请输入赛事标题"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <a-form-item>
              <a-space>
                <a-button
                  type="primary"
                  @click="search"
                >
                  <template #icon>
                    <icon-search />
                  </template>
                  <span>查询</span>
                </a-button>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <span>重置</span>
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
            type="primary"
            @click="handleAdd"
          >
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </div>

      <a-table
        :data="data"
        :columns="columns"
        :bordered="tableBorder"
        :pagination="pagination"
        @page-change="handlePageChange"
        column-resizable="false"
      >
        <template #index="{rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>

        <template #introduce="{record}">
          <div class="text">
            <span v-text="stripHtml(record.introduce)"></span>
          </div>
        </template>

        <template #isTop="{record}">
          <a-tag
            v-if="record.isTop === 1"
            color="#00b42a"
          >置顶</a-tag>
          <a-tag
            v-else
            color="#86909c"
          >未置顶</a-tag>
        </template>

        <template #schedule="{record}">
          <div class="text">
            <span v-text="stripHtml(record.schedule)"></span>
          </div>
        </template>

        <template #operate="{ record }">
          <a-space>
            <a-button
              type="primary"
              @click="handleEdit(record)"
            >编辑</a-button>
            <a-button
              type="primary"
              status="warning"
              @click="handleInfo(record)"
            >详情</a-button>
            <a-button
              type="primary"
              status="danger"
              @click="handleDelete(record)"
            >删除</a-button>
            <a-button
              type="primary"
              status="warning"
              @click="toTop(record)"
              :disabled="record.isTop === 1 ? true : false"
            >置顶</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </a-space>

  <event-center-form
    ref="centerContent"
    @list="queryData"
    :title="options.title"
  />

  <!-- 详情 -->
  <a-modal
    :width="800"
    :closable="false"
    @cancel="handleCancel"
    v-model:visible="visible"
    ref="drawer"
  >
    <div style="height: 600px;overflow: hidden;" >
      <div style="display: flex;justify-content: center;align-items: center;height:50px;overflow: hidden;">
        {{ formModel.title }}
      </div>
      <a-tabs style="height:550px;overflow: auto;">
        <a-tab-pane key="1">
          <template #title>
            <div style="overflow: hidden;">
              <icon-calendar />赛事介绍
            </div>
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.introduce"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #title>
            <icon-clock-circle />赛程安排
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.schedule"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #title>
            <icon-gift /> 奖项及奖励
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.reward"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4">
          <template #title>
            <icon-copy /> 参赛单位要求
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.unitRequirement"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5">
          <template #title>
            <icon-strikethrough /> 项目要求
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.projectRequirement"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6">
          <template #title>
            <icon-attachment /> 项目提交内容
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.submitContent"></p>
          </div>
        </a-tab-pane>
        <a-tab-pane key="7">
          <template #title>
            <icon-calendar /> 公示举报
          </template>
          <div style="height: 100%; overflow: auto; padding: 10px;">
            <p class="ql-editor" v-html="formModel.reviewRule"></p>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <template #footer>
      <a-button @click="handleClose">
        关闭
      </a-button>
    </template>
  </a-modal>

</template>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 400px;
}
</style>